<template>
	<view>
		<uni-section title="购物车" type="line"></uni-section>
		<view class="p8 lists" v-for="item in infoData" :key="item.id">
			<uni-row >
				<uni-col :span="8">
					<image class="cover" :src="item.sku_product.banner" mode="widthFix"></image>
				</uni-col>
				<uni-col :span="15">
					<view class="pl8">
						<view class="title line-clamp2">{{item.sku.title}}</view>
						<view class="amount">x{{item.amount}}</view>
						<view class="price">{{item.sku.price_interval}}</view>
					</view>
				</uni-col>
				<uni-col :span="1"><view class="delete"><uni-icons @click="onDelete(item.id)" type="trash" size="20"></uni-icons></view></uni-col>
			</uni-row>
		</view>
		<view class="fixed-bottom">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
		
		
		<uni-popup ref="popup" background-color="#fff">
			<uni-section class="mb-10" title="集采咨询" type="line"></uni-section>
			<view class="forms overflow-y">
				<uni-forms ref="baseForm" :modelValue="form" label-width="90px">
					<uni-forms-item label="公司名称:" required>
						<uni-easyinput v-model="form.org" placeholder="请输入公司名称" />
					</uni-forms-item>
					<uni-forms-item label="联系人:" required>
						<uni-easyinput v-model="form.name" placeholder="请输入联系人" />
					</uni-forms-item>
					<uni-forms-item label="手机号码:" required>
						<uni-easyinput v-model="form.mobile" placeholder="请输入手机号码" />
					</uni-forms-item>
					<uni-forms-item label="项目名称:">
						<uni-easyinput v-model="form.project" placeholder="请输入项目名称" />
					</uni-forms-item>
					<uni-forms-item label="项目地址:">
						<uni-easyinput v-model="form.address" placeholder="请输入项目地址" />
					</uni-forms-item>
					<uni-forms-item label="采购数量:">
						<uni-easyinput v-model="form.nums" placeholder="请输入采购数量" />
					</uni-forms-item>
				</uni-forms>
				<button class="default-button-push" @click="save()">提交</button>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
	</view>
</template>
<script>
	import customerVue from '../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				form:{},
				infoData:[],
				options: [{
					icon: 'paperplane',
					text: '咨询',
					type:'paperplane',
				}],
				buttonGroup: [{
					text: '集采咨询',
					backgroundColor: '#FFCD1E',
					color: '#666'
				}],
			}
		},
		onShow() {
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/cart_item','POST',{}).then(res => {
					_this.infoData = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			save(){
				let _this = this
				if(!this.form.org){
					uni.showToast({title: '请输入公司名称',icon: 'error',duration: 2000})
					return;
				}
				if(!this.form.mobile){
					uni.showToast({title: '请输入电话',icon: 'error',duration: 2000})
					return;
				}
				if(!this.form.name){
					uni.showToast({title: '请输入联系人',icon: 'error',duration: 2000})
					return;
				}
				this.form.is_cart = true
				this.$request_api('applet_api/product/form','POST',this.form).then(res => {
					if(res.code != 200){
						uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						return;
					}
					uni.showToast({title: '提交成功,近期我们会联系您',icon: 'success',duration: 2000})
					_this.form = {}
					this.$refs.popup.close()
				}).catch(err => {
					console.log(err)
				})
			},
			onDelete(id){
				let _this = this
				this.$request_api('applet_api/cart_item/delete/'+id,'POST',{}).then(res => {
					if(res.code != 200){
						uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						return;
					}
					uni.showToast({title: '删除成功',icon: 'success',duration: 2000})
					_this.onGetData()
				}).catch(err => {
					console.log(err)
				})
			},
			onClick(e){
				if(e.content.type == 'paperplane'){
					this.$refs.popupCustomer.open('center')
				}
			},
			buttonClick(){
				this.$refs.popup.open('bottom')
			},
			onLink(url,id){
				console.log(11)
				uni.navigateTo({
					url: "/pages/information/"+url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.lists{width: 92%;margin:0px auto;box-shadow: 0px 4px 4px #ccc;margin-bottom: 15px;}
.cover{width: 100%;}
.title{line-height: 26px;font-weight: 600;font-size: 1.1rem;height: 52px;}
.amount{font-size: .8rem;padding-top: 5px;color: #666;}
.price{font-size: .8rem;color: #666;padding-top: 5px;}
.delete{line-height: 100px;}
.forms{padding: 30px 15px 60px 15px;}
</style>
